<template>
    <el-dialog :title="title" :visible.sync="dialogForm" width="1100px">
        <div style="display:flex;">
            <el-table ref="planTable" :data="planTable" border stripe max-height="500" class="mt-20" @selection-change="handleSelectionChange">
                <el-table-column fixed="left" type="selection" prop="id" width="55"></el-table-column>
                <el-table-column fixed="left" type="index" label="序号" width="55"></el-table-column>
                <el-table-column align="center" prop="endStationName" label="到站" min-width="60">
                    <template slot-scope="scope">
                        <el-button size="small" type="text"
                                   @click="_toOpenEntrustDetail(scope.row.entrustNo, scope.row.entrustType)">
                            {{ scope.row.endStationName }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="planJobDate" label="预计作业时间" min-width="105"></el-table-column>
                <el-table-column align="center" prop="noJob" label="未作业" min-width="65"></el-table-column>
                <el-table-column align="center" prop="released" label="计划发布数/已发布" min-width="150">
                    <template slot-scope="scope">
                        {{ scope.row.palnReleaseNum }} / {{ scope.row.released }}
                    </template>
                </el-table-column>
            </el-table>
            <!--取消堆场图-->
            <!--<el-table ref="multipleTable" :data="container" border stripe max-height="500" style="margin-left:10px" class="mt-20" @select="select" @select-all="selectAll" @selection-change="handleTableChange">-->
            <el-table ref="multipleTable" :data="container" border stripe max-height="500" style="margin-left:10px" class="mt-20" @selection-change="handleTableChange">
                <el-table-column fixed="left" type="selection" prop="id" width="55"></el-table-column>
                <el-table-column fixed="left" type="index" label="序号" width="55"></el-table-column>
                <el-table-column prop="jobStatus" label="状态" min-width="100">
                    <template slot-scope='scope'>
                        {{scope.row.jobStatus | _filterJobStatus }}
                    </template>
                </el-table-column>
                <el-table-column prop="containerNo" label="箱号" min-width="120"></el-table-column>
                <el-table-column prop="endStationName" label="到站" min-width="80"></el-table-column>
                <el-table-column prop="endStationName" label="场位" min-width="120">
                    <template slot-scope='scope'>
                        {{scope.row.yardAreaNo }}-{{ scope.row.bayNo }}-{{scope.row.rowNo }}-{{scope.row.tierNo }}
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="wagonNo" label="车皮号" min-width="110"></el-table-column> -->
                <el-table-column prop="containerType" label="箱型" min-width="60"></el-table-column>
                <el-table-column prop="containerSize" label="尺寸" min-width="60"></el-table-column>
                <el-table-column prop="ifHeavy" label="空重" min-width="60">
                    <template slot-scope="scope">
                        {{ scope.row.ifHeavy | _filterIfHeavyType }}
                    </template>
                </el-table-column>
                <el-table-column prop="tradeType" label="内外贸" min-width="80">
                    <template slot-scope="scope">
                        {{ scope.row.tradeType | _filterTradeType }}
                    </template>
                </el-table-column>
                <el-table-column prop="cargoName" label="货名" min-width="60"></el-table-column>
                <el-table-column prop="cargoWeight" label="货重" min-width="60"></el-table-column>
                <el-table-column prop="planJobDate" label="预计作业时间" min-width="120"></el-table-column>
            </el-table>
        </div>
        <div class="zc-footer mt-20" style="display: flex;justify-content: center">
            <el-button type="primary" v-if="power('WJOB_CONTROL_CONTAINER_TRAINTX:RECOMMEND')" @click="handleRecommend">系统推荐</el-button>
            <el-button type="primary" v-if="power('WJOB_CONTROL_CONTAINER_TRAINTX:RELEASE')" @click="handleZc" :loading="$store.getters.loadingBtn">开始装车</el-button>
            <!--取消堆场图-->
            <!--<div style="display: flex" class="ml-10" v-if="yard.length>0">-->
            <div style="display: flex" class="ml-10" v-if="false">
                <div class="card-place-work">
                    <div class="place-work JKZX" style="margin:0"></div>
                    <span>未选中</span>
                </div>
                <div class="card-place-work">
                    <div class="place-work BBKCW" style="margin:0"></div>
                    <span>已选中</span>
                </div>
            </div>
        </div>
        <!--<div v-if="yard.length>0" class="mt-10 work-flex">-->
        <div v-if="false" class="mt-10 work-flex">
            <el-button @click="handleCarousel('prev')" type="primary" icon="el-icon-arrow-left" circle></el-button>
            <div style="padding: 0 20px;width: 100%">
                <el-carousel ref="carousel" :autoplay="false" indicator-position="none" trigger="click" arrow="never" height="575px">
                    <el-carousel-item v-for="(item,index) in yard" :key="index">
                        <h3>{{ item.areaNo }}</h3>
                        <yard-map :maxBay="item.maxBay" :maxRow="item.row" :maxTier="item.maxTier" @handleClick="v=>handleClick(v,index)"></yard-map>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <el-button @click="handleCarousel('next')" type="primary" icon="el-icon-arrow-right" circle></el-button>
        </div>
        <el-dialog title="装箱数" :visible.sync="zxForm" :modal="false"  width="1000px">
            <el-form :rules="rules" ref="form" :model="form">
                <el-row v-for="(item,index) in form.container" :key="item.id">
                    <el-col :span="6">
                        <el-form-item label="到站:" label-width="90px">
                            {{ item.endStationName }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="计划发布数:" label-width="100px">
                            {{ item.released }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="已发布数:" label-width="90px">
                            {{ item.palnReleaseNum }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label-width="120px" label="计划发布数:" :prop="'container.'+index+'.num'" :rules="{ required: true, message: '请输入计划发布数', trigger: 'blur' }">
                            <el-input-number :controls="false" v-model="item.num" :max="item.noJob"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="zc-footer mt-20">
                <el-button type="primary" @click="handleSelect" :loading="$store.getters.loadingBtn">确 定</el-button>
                <el-button type="primary" @click="zxForm=false">取 消</el-button>
            </div>
        </el-dialog>
        <entrust-detail :modal="false" ref="entrustDetail"></entrust-detail>
    </el-dialog>
</template>
<script>
import { getPlanTable, getRecommend,commandRelease } from "@/api/middleControl/middleControl";
import { getYardMap } from "@/api/yardPlan/yardPlan";
import yardMap from "../common/yardMap";
import entrustDetail from '../entrust/entrustDetail'

export default {
    components: {
        yardMap,entrustDetail
    },
    data() {
        return {
            title: "装车控制",
            dialogForm: false,
            planTable: [],
            multipleSelection: [],
            container: [],
            tableSelect: [],
            zxForm: false,
            form: {
                container: []
            },
            rules: {},
            maxBay: 0,
            maxTier: 0,
            maxRow: [],
            yard: [],
            copyYard:[],
            info:[]
        };
    },
    mounted() {
    },
    methods: {
        loadData() {
            getPlanTable().then(res => {
                console.log(res);
                this.planTable = res.data.aaData;
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            this.form.container = JSON.parse(JSON.stringify(val));
        },
        handleTableChange(val) {
            this.tableSelect = val;
        },
        handleRecommend() {
            if (this.multipleSelection.length === 0) {
                this.$message({ message: "请先选择一条数据!", type: "error" });
                return null;
            }
            this.zxForm = true;
        },
        handleSelect(){
            this.$refs.form.validate((valid) => {
                if(valid){
                    getRecommend(this.form.container).then(res=>{
                        this.container=res.data.aaData
                        // 取消堆场图
                        // this.getRow();
                        this.$nextTick(()=>{
                            this.container.forEach(row=>{
                                this.$refs.multipleTable.toggleRowSelection(row)
                            })
                            // this.$refs.planTable.clearSelection()
                        })
                        this.zxForm=false
                    })
                }else{
                    this.$message({message:'请检查表单!',type:'error'})
                }
            })
        },
        handleZc(){
            if(this.tableSelect.length<1){
                this.$message({message:'请选择装车数据!',type:'error'})
                return
            }
            let data=[]
            for (let i = 0; i < this.tableSelect.length; i++) {
                const element = this.tableSelect[i];
                data.push({
                    ...element,
                    jobPurpose:'TX',
                    transportMode:'TR'
                })
            }
            commandRelease(data).then(res=>{
                console.log(res);
                this.dialogForm=false
            })
        },
        getRow() {
            this.yard=[]
            if (this.container.length > 0) {
                let container = this.container.filter(f=>{
                   return f.yardAreaNo
                })
                this.info = this.$assist.arrayUnique(container, 'yardAreaNo')
                this.handleAsync(0)
            }
        },
        handleAsync(j){
            let info=this.info
            let yard = []
            if(j<this.info.length){
                let params = {
                    search_EQ_areaNo: info[j].yardAreaNo
                }
                getYardMap(params).then(res => {
                    let data = res.data;
                    if (data.maxBay % 2 === 0) {
                        data.maxBay = data.maxBay + 1;
                    }
                    // this.maxBay = data.maxBay;
                    // this.maxTier = data.maxTier;
                    let [maxBay, maxRow, maxTier] = [
                        data.maxBay,
                        data.maxRow,
                        data.maxTier
                    ];
                    let tier = [];
                    for (let i = 0; i < maxTier; i++) {
                        tier.push({
                            containerNo: "",
                            type: ""
                        });
                    }
                    let bayNum = maxBay;
                    let bay = [];
                    for (let i = 0; i < bayNum + 1; i++) {
                        bay.push(tier);
                    }
                    let row = [];
                    for (let i = 0; i < maxRow; i++) {
                        row.push(bay);
                    }
                    // console.log(row);
                    for (let i = 0; i < this.container.length; i++) {
                        const el = this.container[i]
                        if (el.yardAreaNo === info[j].yardAreaNo) {
                            yard.push(el)
                        }
                    }
                    let setRow=JSON.parse(JSON.stringify(row))
                    for (let i = 0; i < yard.length; i++) {
                        const el=yard[i]
                        // console.log(el);
                        if (el.bayNo % 2 === 0) {
                            setRow[Number(el.rowNo - 1)][Number(el.bayNo) - 1].splice(el.tierNo - 1, 1, {
                                containerNo: el.containerNo,
                                type: 'BBKCW',
                                bayNo: Number(el.bayNo)
                            });
                            setRow[Number(el.rowNo - 1)][Number(el.bayNo) + 1].splice(el.tierNo - 1, 1, {
                                containerNo: el.containerNo,
                                type: 'BBKCW',
                                bayNo: Number(el.bayNo),
                                style: "none"
                            });
                        } else {
                            // console.log(el.tierNo);
                            setRow[Number(el.rowNo - 1)][Number(el.bayNo)].splice(el.tierNo - 1, 1, {
                                containerNo: el.containerNo,
                                type: 'BBKCW',
                                bayNo: Number(el.bayNo)
                            });
                        }
                    }
                    this.yard.push({ row: setRow, maxBay: data.maxBay, maxTier: maxTier,areaNo:data.areaNo })
                    this.copyYard=this.$assist.deepcopy(this.yard)
                    // console.log(this.yard)
                    this.handleAsync(j+1)
                })
            }
        },
        handleClick(item,index){
            // console.log(item,index)
            if(!item.containerNo){
                return
            }
            this.container.forEach(row=>{
                if(row.containerNo===item.containerNo){
                    this.$refs.multipleTable.toggleRowSelection(row)
                }
            })
            let type='JKZX'
            if(item.type==='JKZX'){
                type='BBKCW'
            }
            if(item.bay%2===0){
                this.yard[index].row[item.row][item.bay-1].splice(item.tier,1,{containerNo:item.containerNo,type:type,bayNo:item.bay})
                this.yard[index].row[item.row][item.bay+1].splice(item.tier,1,{containerNo:item.containerNo,type:type,bayNo:item.bay,style: "none"})
            }else{
                this.yard[index].row[item.row][item.bay].splice(item.tier,1,{containerNo:item.containerNo,type:type,bayNo:item.bay})
            }
        },
        handleCarousel(type){
            if(type==='prev'){
                this.$refs.carousel.prev()
            }else{
                this.$refs.carousel.next()
            }
        },
        select(selection,val){
            // console.log(selection,val)
            let yard=this.yard
            for (let i = 0; i < yard.length; i++) {
                for (let j = 0; j < yard[i].row.length; j++) {
                    const el=yard[i].row[j]
                    for (let k = 0; k < el.length; k++) {
                        for (let l = 0; l < el[k].length; l++) {
                            const last=el[k][l]
                            // console.log(i,j,k,l)
                            // console.log(last)
                            let type='JKZX'
                            if(last.type==='JKZX'){
                                type='BBKCW'
                            }
                            // for (let m = 0; m < val.length; m++) {
                            if(last.containerNo===val.containerNo){
                                // console.log(i,j,k,l)
                                // console.log(this.yard[i].row[j])
                                if(this.yard[i].row[j][k][l].bayNo%2===0){
                                    this.yard[i].row[j][k].splice(l,1,{containerNo:last.containerNo,type:type,bayNo:this.yard[i].row[j][k][l].bayNo})
                                    this.yard[i].row[j][k+2].splice(l,1,{containerNo:last.containerNo,type:type,bayNo:this.yard[i].row[j][k][l].bayNo,style:'none'})
                                }else{
                                    this.yard[i].row[j][k].splice(l,1,{containerNo:last.containerNo,type:type,bayNo:this.yard[i].row[j][k][l].bayNo})
                                }
                                return
                            }
                            // }
                        }
                    }
                }
            }
        },
        selectAll(val){
            // console.log(val)
            if(true){
                let yard=this.yard
                for (let i = 0; i < yard.length; i++) {
                    for (let j = 0; j < yard[i].row.length; j++) {
                        const el=yard[i].row[j]
                        for (let k = 0; k < el.length; k++) {
                            for (let l = 0; l < el[k].length; l++) {
                                const last=el[k][l]
                                // let type='JKZX'
                                // if(last.type==='JKZX'){
                                //     type='BBKCW'
                                // }
                                if(val.length>0){
                                    for (let m = 0; m < val.length; m++) {
                                        if(last.containerNo===val[m].containerNo){
                                            // console.log(i,j,k,l)
                                            // console.log(this.yard[i].row[j])
                                            if(this.yard[i].row[j][k][l].bayNo%2===0&&last.style==='style'){
                                                this.yard[i].row[j][k-2].splice(l,1,{containerNo:last.containerNo,type:'BBKCW',bayNo:this.yard[i].row[j][k][l].bayNo})
                                                this.yard[i].row[j][k].splice(l,1,{containerNo:last.containerNo,type:'BBKCW',bayNo:this.yard[i].row[j][k][l].bayNo,style:'none'})
                                            }else{
                                                this.yard[i].row[j][k].splice(l,1,{containerNo:last.containerNo,type:'BBKCW',bayNo:this.yard[i].row[j][k][l].bayNo})
                                            }
                                            // return
                                        }
                                    }
                                }else{
                                    if(last.containerNo){
                                        if(last.bayNo%2===0&&last.style==='style'){
                                            this.yard[i].row[j][k-2].splice(l,1,{containerNo:last.containerNo,type:'JKZX',bayNo:this.yard[i].row[j][k][l].bayNo})
                                            this.yard[i].row[j][k].splice(l,1,{containerNo:last.containerNo,type:'JKZX',bayNo:this.yard[i].row[j][k][l].bayNo,style:'none'})
                                        }else{
                                            this.yard[i].row[j][k].splice(l,1,{containerNo:last.containerNo,type:'JKZX',bayNo:this.yard[i].row[j][k][l].bayNo})
                                        }
                                    }

                                }
                            }
                        }
                    }
                }
            }
        },
        // 打开委托详情
        _toOpenEntrustDetail(id, type) {
            this.$refs.entrustDetail.getData(id, type)
        },
    },
    watch:{
        dialogForm(bool){
            if(!bool){
                this.$emit('load')
                this.$parent.zcTable=false
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.zc-footer {
    text-align: center;
}
.zc-flex-center {
    display: flex;
    justify-content: center;
    padding: 50px 50px 0 50px;
}
.work-flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.BBKCW {
    background-color: #5c9dff;
}
.JKZX {
    background-color: #c28efd;
}
.card-place-work {
    display: flex;
    width: 90px;
    margin-right: 20px;
    /*margin-bottom: 10px;*/
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}
.card-place-work span {
    font-size: 13px;
}
.place-work {
    /* border: 1px solid rgb(245, 56, 56); */
    width:34px;
    height: 22px;
    margin-bottom: 2px;
    cursor: pointer;
}
</style>
